.DatePicker{
	width:216px;
	z-index:1000;
	position: absolute;
	top:32px;
	left: 0;

	.calendar-header{
		text-align:center;
		background-color:#00a4a8;
		color:#fff;
		padding:3px 0;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		position:relative;
		.action{
			position:absolute;
			top:4px;
			.symbol{
				fill:white;
			}
		}
		.actionPrev{
			left:3px;
		}
		.actionNext{
			right:3px;
		}
	}

	.calendar-footer{
		background-color:#00a4a8;
		padding:3px;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		.button{
			cursor:pointer;
			width:48px;
			margin:auto;
			padding:2px;
			background:#fff;
			color:#777;
			font-size: 12px;
			text-align:center;
			border-radius:4px;
		}
	}
	&-calendar-table{
		width:100%;
		border: 1px solid #00a4a8;
		background: #fff;
		td,th{
			text-align:center;
		}
		.calendar-week{
			background-color:#e6e6e6;
			th{
				color:#777777;
			}
		}
		tbody{
			background-color:#fff;
			td{
				color:#444;
				font-size: 12px;
				cursor:pointer;
				.date{
					display: flex;
					flex-direction: column;
					.lunar{
						white-space: nowrap;
						font-size: 12px;
						transform: scale(.8);
						color: var(--txt-lighter);
					}
				}
				.disable{
					opacity: .5;
				}
				.selected{
					background-color:#00a4a8;
					color: white;
					.lunar{
						color: var(--txt-lightest);
					}
				}
				&:hover{
					background-color:#00a4a8;
					color: white;
					.lunar{
						color: var(--txt-lightest);
					}
				}
			}
		}
	}

}